<template>
    <div id="manage">
        <div
            ref="articleData"
            class="article-data"
        >
            <add-fun></add-fun>
            <el-table
                v-loading="loading"
                :data="typeData"
                border
                style="width: 100%"
                element-loading-text="拼命加载中"
                :max-height="500"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="typeName"
                    label="类型"
                >
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="添加时间"
                >
                </el-table-column>
                <el-table-column
                    prop="articleTotal"
                    label="下属文章总数"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="150"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { manageCommonMixins } from 'assets/js/mixins';
    import { addType, deleteType, editType, searchType } from 'assets/js/api';
    export default {
        mixins: [
            manageCommonMixins
        ],
        data () {
            return {
                typeData: [], // 文章类型数据
                loading: true // table loading flag
            };
        },
        mounted () {
            this.searchType();
        },
        methods: {
            /**
             * 添加
             */
            addFun () {
                this.$prompt('请输入类型名', '新增文章类型', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator: (val) => {
                        return !!val.trim();
                    },
                    inputErrorMessage: '类型名格式不正确'
                }).then(({ value }) => {
                    addType({
                        typeName: value.trim()
                    }).then(res => {
                        if (!res.status) {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                            return;
                        }
                        this.$message({
                            type: 'success',
                            message: '类型名新增成功！'
                        });
                        this.searchType();
                    });
                });
            },
            /**
             * 编辑
             */
            handleEdit (index, row) {
                this.$prompt('请输入类型名', '修改文章类型', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator: (val) => {
                        return !!val.trim();
                    },
                    inputValue: row.typeName,
                    inputErrorMessage: '类型名格式不正确'
                }).then(({ value }) => {
                    editType({
                        typeName: value.trim(),
                        _id: row._id
                    }).then(res => {
                        if (!res.status) {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                            return;
                        }
                        this.$message({
                            type: 'success',
                            message: '类型名修改成功！'
                        });
                        this.searchType();
                    }).catch(() => {});
                });
            },
            /**
             * 删除
             */
            handleDelete (index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteType({
                        _id: row._id
                    }).then(res => {
                        if (!res.status) {
                            this.$message({
                                type: 'info',
                                message: res.msg
                            });
                            return;
                        }
                        this.$message({
                            type: 'success',
                            message: res.msg
                        });
                        this.searchType();
                    }).catch(() => {});
                });
            },
            /**
             * 查询类型列表
             */
            searchType () {
                this.loading = true;
                searchType({}).then(res => {
                    if (!res.status) {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                        return;
                    }
                    this.typeData = res.data;
                    this.loading = false;
                }).catch(() => {});
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/manageCommon';
</style>
